<script setup>
    import {reactive,ref} from 'vue'
    // 引入接口数据
    import {Login} from '../../api/index'
    // 引入elementplus的 消息弹窗组件
    import { ElMessage } from 'element-plus'
    // 引入router对象
    import router from '../../router/index'
    // 定义需要发送的参数变量
    const obj = reactive({
        // 登录的用户名
        username: '',
        // 登录的密码
        password: ''
    })
    // 按钮禁用状态
    let loading = ref(false)

    // 用箭头函数 定义函数
    const loginIn = () => {
        // console.log(obj);\
        // 用户名 密码不能为空
        if(obj.username == ''){
            ElMessage('用户名不能为空');
            return
        }
        if(obj.password == ''){
            ElMessage('密码不能为空');
            return
        }
        // 在服务器没有返回状态之前 让 登录按钮一直保持禁用状态
        loading.value = true;
        // 调用登录接口
        Login(obj).then(res => {
            if(res.data.code == 200){
                ElMessage({
                    message: '登录成功',
                    type: 'success',
                })
                
                // 把token临时存在本地
                sessionStorage.setItem(
                    'token',
                    res.data.data.tokenHead + res.data.data.token    
                )

                // 跳转到首页
                router.push('/')
            }else{
                ElMessage({
                    message: res.data.message,
                    type: 'error',
                })
            }
            // 返回状态之后 需要解除禁用
            loading.value = false;
        })
    }
</script>

<template>
    <div>
      <el-card class="login-form-layout">
        <el-form autoComplete="on"
                 ref="loginForm"
                 label-position="left">
          <h2 class="login-title color-main">mall-admin-web</h2>
          <el-form-item prop="username">
            <el-input name="username"
                      type="text"
                      v-model="obj.username"
                      autoComplete="on"
                      placeholder="请输入用户名">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input name="password"
                      autoComplete="on"
                      v-model="obj.password"
                      type="password"
                      placeholder="请输入密码">
            </el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 60px;text-align: center">
            <el-button style="width: 45%" type="primary" :loading="loading"
                @click="loginIn()"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  
  <style scoped>
    .login-form-layout {
      position: absolute;
      left: 0;
      right: 0;
      width: 360px;
      margin: 140px auto;
      border-top: 10px solid #409EFF;
    }
    .login-title {
      text-align: center;
    }
    .login-center-layout {
      background: #409EFF;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      margin-top: 200px;
    }
  </style>